<!--顶部功能导航-->
<template>
    <div class="top_nav clearfix">
      <router-link v-for="item in navtop" :key="item.navId" :to="{ name: item.routername }">
        <img :src="item.imgicon" :alt="item.title"><span>{{item.title}}</span>
      </router-link>
    </div>
</template>

<script>
  export default {
    name: 'top_nav',
    props: ['navtop'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>


<style>
  .top_nav{
    width: 320px;
    padding-top: 14px;
    border-bottom: 1px solid #E7E7E7;
    background: #fff;
  }
  .top_nav a{
    width: 25%;
    float:left;
    margin-bottom: 14px;
    text-align: center;
    position: relative;
  }
  .top_nav a img{
    width:46px;
    display: block;
    margin:0 17px 10px;
  }
  .top_nav span{
     color:#666;
     display: block;
}
  .top_nav a:nth-child(6):after{
    content:"送包月";
    background: #E50038;
    font-style: normal;
    border-radius: 10px;
    padding:0 6px;
    color:#fff;
    font-size: 12px;
    position: absolute;
    top:-8px;
    left:25px;
    width: 48px;
  }
</style>
